<div style="padding: 10px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend>产品编辑</legend>
    </fieldset>
    <form class="layui-form" enctype="multipart/form-data" action="{:U('Goods/updateGoods')}" method="post">
        <div class="layui-form-item">
            <input type="text" name="id" hidden value="{$goodsData.id}">
            <div class="layui-inline">
                <label class="layui-form-label">产品名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" lay-verify="required" placeholder="请输入名称"
                           autocomplete="off" class="layui-input" value="{$goodsData.name}">
                </div>
                <div class="layui-form-mid " style="color: red;font-size: 12px;">*</div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">产品价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="price" lay-verify="required|number" placeholder="请输入产品价格"
                           autocomplete="off" class="layui-input" value="{$goodsData.price}">
                </div>
                <div class="layui-form-mid " style="color: red;font-size: 12px;">*</div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">材质颜色</label>
                <div class="layui-input-inline">
                    <input type="text" name="material_color" lay-verify="required" placeholder="请输入材质颜色"
                           autocomplete="off" class="layui-input" value="{$goodsData.material_color}">
                </div>
                <div class="layui-form-mid " style="color: red;font-size: 12px;">*</div>
            </div>

        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">产品数量</label>
                <div class="layui-input-inline">
                    <input type="text" name="pro_num" lay-verify="number" placeholder="请输入单个产品所含数量"
                           autocomplete="off" class="layui-input" value="{$goodsData.pro_num}">
                </div>
                <div class="layui-form-mid " style="color: red;font-size: 12px;">可选</div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">产品规格</label>
                <div class="layui-input-inline">
                    <input type="text" name="pro_stanrad" lay-verify="" placeholder="请输入单个产品规格"
                           autocomplete="off" class="layui-input" value="{$goodsData.pro_standard}">
                </div>
                <div class="layui-form-mid " style="color: red;font-size: 12px;">可选，例：81*21*13cm</div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">产品大小</label>
                <div class="layui-input-inline">
                    <input type="text" name="pro_size" lay-verify="" placeholder="请输入单个产品规格"
                           autocomplete="off" class="layui-input" value="{$goodsData.pro_size}">
                </div>
                <div class="layui-form-mid " style="color: red;font-size: 12px;">可选，例：大型、小型</div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">适用节日</label>
                <div class="layui-input-inline">
                    <input type="text" name="festival" lay-verify="required" placeholder="请输入适用节日"
                           autocomplete="off" class="layui-input" value="{$goodsData.festival}">
                </div>
                <div class="layui-form-mid " style="color: red;font-size: 12px;">* &nbsp;例：情人节,520表白日,七夕节</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">初始分类</label>
            <div class="layui-input-inline">
                <div class="layui-input-block" style="margin-left: 0;text-align: center;line-height: 38px;">
                    产品品类：{$goodsData.class}
                </div>

            </div>
            <div class="layui-input-inline">
                <div class="layui-input-block" style="margin-left: 0;text-align: center;line-height: 38px;">
                    产品类型：{$goodsData.type}
                </div>
            </div>
            <div class="layui-input-inline">
                <div class="layui-input-inline" style="margin-left: 0;text-align: center;line-height: 38px;">
                    产品系列：{$goodsData.series}
                </div>
            </div>
            <div class="layui-input-inline">
                <div class="layui-input-inline" style="margin-left: 0;text-align: center;line-height: 38px;">
                    产品规格：{$goodsData.standard}
                </div>
            </div>
        </div>
        <!--产品品类-->
        <div class="layui-form-item">
            <label class="layui-form-label">产品分类</label>
            <div class="layui-input-inline">
                <select id="class" name="class" lay-filter="class" lay-verify="required">
                    <option value="">选择品类</option>
                </select>
            </div>
            <!--0-->
            <div class="layui-input-inline" style="">
                <select id="type" name="type" lay-filter="type" lay-verify="required">
                    <option value="">选择类型</option>
                </select>
            </div>
            <!--1-->
            <div class="layui-input-inline" style="">
                <select id="series" name="series" lay-filter="series" lay-verify="required">
                    <option value="">选择系列</option>
                </select>
            </div>
            <!--2-->
            <div class="layui-input-inline" style="">
                <select id="stanrand" name="stanrand" lay-filter="stanrand" lay-verify="required">
                    <option value="">选择规格</option>
                </select>
            </div>
            <div class="layui-form-mid " style="color: red;font-size: 12px;">每项必选一项*</div>
        </div>
        <!--产品场景-->
        <div class="layui-form-item">
            <label class="layui-form-label">初始场景</label>
            <div class="layui-input-inline">
                <div class="layui-input-block" style="margin-left: 0;text-align: center;line-height: 38px;">
                    产品场景：{$goodsData.situation}
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">产品场景</label>
            <div class="layui-input-inline">
                <select id="situation" name="situation" lay-filter="situation" lay-verify="required">
                    <option value="">选择场景</option>
                </select>
            </div>
            <div class="layui-form-mid " style="color: red;font-size: 12px;">*</div>
        </div>
        <!--产品对象-->
        <div class="layui-form-item">
            <label class="layui-form-label">初始对象</label>
            <div class="layui-input-inline">
                <div class="layui-input-block" style="margin-left: 0;text-align: center;line-height: 38px;">
                    产品对象：{$goodsData.target}
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">产品对象</label>
            <div class="layui-input-inline">
                <select id="target" name="target" lay-filter="target" lay-verify="required">
                    <option value="">选择对象</option>
                </select>
            </div>
            <div class="layui-form-mid " style="color: red;font-size: 12px;">*</div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <div class="layui-input-inline">
                    <label class="layui-form-label">产品轮播图</label>
                </div>
                <div class="layui-input-block">
                    <div id="layer-photos-demo" class="layer-photos-demo" style="width: 800px;">
                        <foreach name="goodsData['slideImageData']" item="slideImg">
                            <img layer-pid="图片id，可以不写" layer-src="__ROOT__{$slideImg['src']}"
                                 src="__ROOT__{$slideImg['src']}" style="height: 50px; padding-right: 10px" alt="轮播图">
                        </foreach>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <div class="layui-input-inline">
                    <label class="layui-form-label">产品详情图</label>
                </div>

                <div class="layui-input-block">
                    <div id="layer-photos-demo2" class="layer-photos-demo" style="width: 800px;">
                        <foreach name="goodsData['detailImageData']" item="detailImg">
                            <img layer-pid="图片id，可以不写" layer-src="__ROOT__{$detailImg['src']}"
                                 src="__ROOT__{$detailImg['src']}" style="height: 50px; padding-right: 10px" alt="详情图">
                        </foreach>
                    </div>
                </div>
            </div>
        </div>

        <!--产品图添加-->

        <div class="layui-form-item">

            <div id="slideimg">
                <button type="button" class="layui-btn " id="test"><i class="fa fa-plus-square"
                                                                      aria-hidden="true"></i>&nbsp;&nbsp;重新添加轮播图
                </button>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="layui-badge ">轮播图重新添加</span>
            </div>
        </div>

        <div class="layui-form-item">
            <div id="detailimg">
                <button type="button" class="layui-btn " id="test1"><i class="fa fa-plus-square"
                                                                       aria-hidden="true"></i>&nbsp;&nbsp;重新添加详情图
                </button>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="layui-badge ">详情图重新添加</span>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block" style="padding-left: 35%">
                <button type="submit" class="layui-btn" id="submit" lay-submit lay-filter="save">提交</button>
                <button type="reset" id="reset" class="layui-btn layui-btn-primary" style="margin-left: 10%">重置</button>
            </div>
        </div>
    </form>

</div>
<script>
    /*
     * 图片浏览
     * */
    layui.use('layer', function () {
        var layer = layui.layer;
        layer.photos({
            photos: '#layer-photos-demo'
            , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });
        layer.photos({
            photos: '#layer-photos-demo2'
            , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });
        $('detailEdit').on('click', function () {

        });

    });
    layui.use(['form', 'layer', 'jquery'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        form.render();
        /*
         * 产品品类获取
         * */

        $.post("{:U('Goods/showCategory')}", {type: 2}, function (res) {
            var classData = res;
            var obj = jQuery.parseJSON(classData);
            for (var i = 0; i < obj.length; i++) {
                $('#class').append("<option value='" + obj[i]['id'] + "'>" + obj[i]['value'] + "</option>");
            }
            form.render('select');
            /*
             * 监听每次的点击，故可以直接移除之前的操作，在重新添加
             * */
            form.on('select(class)', function (data) {
                //移除上一次更新的option
                $('#type').children('option').remove();
                $('#type').append("<option value=''>选择类型</option>");
                $('#series').children('option').remove();
                $('#series').append("<option value=''>选择系列</option>");
                $('#stanrand').children('option').remove();
                $('#stanrand').append("<option value=''>选择规格</option>");
                for (var j = 0; j < obj.length; j++) {
                    if (obj[j]['id'] == data.value) {
                        for (var k = 0; k < obj[j]['son'].length; k++) {
                            //根据数据表中分配到的order进行添加
                            if (obj[j]['son'][k]['order'] == 0) {
                                $('#type').append("<option value='" + obj[j]['son'][k]['id'] + "'>" + obj[j]['son'][k]['value'] + "</option>");
                            }
                            if (obj[j]['son'][k]['order'] == 1) {
                                $('#series').append("<option value='" + obj[j]['son'][k]['id'] + "'>" + obj[j]['son'][k]['value'] + "</option>");
                            }
                            if (obj[j]['son'][k]['order'] == 2) {
                                $('#stanrand').append("<option value='" + obj[j]['son'][k]['id'] + "'>" + obj[j]['son'][k]['value'] + "</option>");
                            }
                        }
                    }
                }
                form.render('select');
            });
        });

        /*
         *
         * 产品场景获取
         * */
        $.post("{:U('Goods/showCategory')}", {type: 1}, function (res) {
            var situationData = res;
            var obj = jQuery.parseJSON(situationData);
            for (var i = 0; i < obj.length; i++) {
                $('#situation').append("<option value='" + obj[i]['id'] + "'>" + obj[i]['value'] + "</option>");
            }
            form.render('select');
            /*
             * 由于非自动添加分类，故不需要继续选择子分类
             * */
        });

        /*
         * 产品对象
         * */
        $.post("{:U('Goods/showCategory')}", {type: 0}, function (res) {
            var targetData = res;
            var obj = jQuery.parseJSON(targetData);

            for (var i = 0; i < obj.length; i++) {
                $('#target').append("<option value='" + obj[i]['id'] + "'>" + obj[i]['value'] + "</option>");
            }
            form.render('select');
            /*
             * 由于非自动添加分类，故不需要继续选择子分类
             * */
        });

    });


    /*图片添加逻辑*/
    var temp = 0;
    var temp2 = 0;
    var sort = 1;
    var sort2 = 1;

    /*产品轮播图添加*/
    $('#test').on('click', function () {

        if (temp == 0) {
            $('#slideimg').append("<blockquote id='listimg' class='layui-elem-quote layui-quote-nm' style='margin-top: 10px;'>轮播图上传：<div class='layui-input-block layui-anim layui-anim-up'><span class='layui-badge layui-bg-blue'>" + sort + "</span><input type='file' name = 'photo[]' style='font-size: 15px;width: 190px; padding-left: 15px;' ><input type='button'  name ='deleteBtn' class=' deleteBtn layui-btn  layui-btn-sm layui-btn-radius layui-btn-danger' style=' margin-left: 20px;' value='一'></div></blockquote> ");
            $('#test').text('继续添加');
            temp = 1;
        } else {
            $('#listimg').append("<div class='layui-input-block layui-anim layui-anim-up'><span class='layui-badge layui-bg-blue'>" + sort + "</span><input type='file' name = 'photo[]' style=' font-size: 15px;width: 190px; padding-left: 15px; ' ><input type='button'  name ='deleteBtn' class=' deleteBtn layui-btn layui-btn-sm layui-btn-radius layui-btn-danger' style=' margin-left: 20px;' value='一'></div>");
        }
        sort++;
        /*图片删除按钮*/
        var deleteBTN = document.getElementsByName('deleteBtn');

        for (var i = 0; i < deleteBTN.length; i++) {
            deleteBTN[i].onclick = function () {
//                    var parentofImg = document.getElementById('#slideimg');
                this.parentNode.parentNode.removeChild(this.parentNode);
//
            }
        }
    });

    /*产品详情图添加*/
    $('#test1').on('click', function () {

        if (temp2 == 0) {
            $('#detailimg').append("<blockquote id='detaillist' class='layui-elem-quote layui-quote-nm' style='margin-top: 10px;'>详情图上传：<div class='layui-input-block layui-anim layui-anim-up'><span class='layui-badge layui-bg-blue'>" + sort2 + "</span><input type='file' name = 'detailphoto[]' style='font-size: 15px;width: 190px; padding-left: 15px;' ><input type='button' name ='deleteBtn' class=' deleteBtn layui-btn layui-btn-sm layui-btn-radius layui-btn-danger' style=' margin-left: 20px;' value='一'></div></blockquote> ");
            $('#test1').text('继续添加');
            temp2 = 1;
        } else {
            $('#detaillist').append("<div class='layui-input-block layui-anim layui-anim-up'><span class='layui-badge layui-bg-blue'>" + sort2 + "</span><input type='file' name = 'detailphoto[]' style=' font-size: 15px;width: 190px; padding-left: 15px; ' ><input type='button'  name ='deleteBtn' class=' deleteBtn layui-btn layui-btn-sm layui-btn-radius layui-btn-danger' style=' margin-left: 20px;' value='一'></div>");
        }
        sort2++;
        /*图片删除按钮*/
        var deleteBTN = document.getElementsByName('deleteBtn');
        for (var i = 0; i < deleteBTN.length; i++) {
            deleteBTN[i].onclick = function () {
                this.parentNode.parentNode.removeChild(this.parentNode);
            }
        }
    });
    /*
     * 重置按钮清除图片
     * */
    $('#reset').on('click', function () {
        $('#slideimg').children('#listimg').children().remove();
        $('#detailimg').children('#detaillist').children().remove();
        sort = 1;
        sort2 = 1;
    });


</script>